<style type="text/css">
    #scroll_wrapper {
        z-index: 1;
        background-color: #ffffff;
    }
    .navHeaderContainer .small-title {
    font-size: 22px;
    color: #999;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    }
    
    li.noneBold {
        list-style-type: none;
        margin: 0 0 0 2px;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
    }

    li.none {
        margin: 0 0 0 2px;
        list-style-type: none;
        /*list-style:url(/mobilemode/images/position2.png) inside}*/
    }

    li.active {
        list-style-type: square;
        color: #008000;
    }

    ul.disc {
        list-style-type: disc;
        font-size: 16px;
        color: #B3B3B3;
        margin: 8px 0;
    }

    span.positionImage {
        background-image: url(/mobilemode/images/position5.png) ;
        background-repeat: no-repeat;
        padding-left: 20px;
        padding-bottom: 0px;
    }

    div.recordDiv {
        padding-bottom: 0px;
    }

    span.juhonglabel {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        border-width: 1px;
        border-style: solid;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #ff5722;
        background-color: #fff;
        color: #ff5722;
        position: relative;
        display: inline-block;
        padding: 0 6px;
        font-size: 12px;
        text-align: center;
        border-radius: 2px;
    }

    span.greenlabel {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        border-width: 1px;
        border-style: solid;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #51b904;
        background-color: #fff;
        color: #51b904;
        position: relative;
        display: inline-block;
        padding: 0 6px;
        font-size: 12px;
        text-align: center;
        border-radius: 2px;
    }

    .btn {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #0080FF;
        border: 1px solid #d5d5d5;
        outline: none;
    }

    .btndisable {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #949ca6;
        border: 1px solid #d5d5d5;
        outline: none;
    }

    .disabled {
        pointer-events: none;
    }

    span.timeSpan {
        font-size: 15px;
    }
</style>
<div>
    <div id="container" style="height:200px;width:100%;"></div>
    <div style="display:block;font-size: 14px;padding: 3px 10px;">当前位置：<span id="address">定位中...</span></div>

    <div id="record">
    </div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=noxDvacPFxnudsybXqwZKdr67SudUupK"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

<script type="text/javascript">
    var currlng, currlat, kqlng, kqlat, kqfw, kqdd, curraddress;
    var map = new BMap.Map("container", { enableMapClick: false });    // 创建Map实例
    var point = new BMap.Point(113.404942, 22.520568);
    map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
    //map.setCurrentCity("中山");          // 设置地图显示的城市
    mobile_getCurrentPosition();

    updateRecordView();//加载打卡记录

    //移动建模定位
    function mobile_getCurrentPosition() {
        Mobile_NS.showLoader();
        $("#address").text('定位中...');
        Mobile_NS.getCurrentPosition(function (result) {
            //alert("返回结果："+JSON.stringify(result) );
            var status = result["status"];
            if (status == "1") {
                var lng = result["lng"];
                var lat = result["lat"];
                var addr = result["addr"];
                curraddress = addr;
                var baiduPoint = new BMap.Point(lng, lat);
                initMap(baiduPoint);
                $("#address").text(addr);

                setCircleLocation(lng, lat);
            } else {
                var errMsg = result["errMsg"];
                Mobile_NS.Alert("errr:" + errMsg);
            }
            Mobile_NS.hideLoader();
        });
    }

    function initMap(point) {
        map.clearOverlays();
        map.centerAndZoom(point, 17);
        map.setMinZoom(15);
        map.setMaxZoom(19);
        map.disableDragging();
        map.disableScrollWheelZoom();
        map.disableDoubleClickZoom();
        var centerMarker = new BMap.Marker(point);
        map.addOverlay(centerMarker);
        map.panTo(centerMarker);
        var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(scaleControl);
        map.enableScrollWheelZoom();
    }

    //设置考勤点区域范围,并让地图缩放级别能显示当前位置和考勤区域在可视范围
    function setCircleLocation(lng, lat) {
        currlng = lng;
        currlat = lat;
        var scurrlng = currlng - 0.01;
        var ecurrlng = currlng + 0.01;
        var scurrlat = currlat - 0.01;
        var ecurrlat = currlat + 0.01;
        console.info("setCircleLocation");
        console.info(scurrlng + "--" + ecurrlng);
        console.info(scurrlat + "--" + ecurrlat);
        Mobile_NS.SQL("select jd,wd,kqfw,szdd,jdn from uf_kqdd where jd>{scurrlng} and jd<{ecurrlng} and wd>{scurrlat} and wd<{ecurrlat} order by (Square(jd-{currlng})+Square(wd-{currlat})) desc ;scurrlng="
            + scurrlng + ";ecurrlng=" + ecurrlng + ";scurrlat=" + scurrlat + ";ecurrlat=" + ecurrlat + ";currlng=" + currlng + ";currlat=" + currlat, function (result) {
                console.info("考勤点查询结果:");
                console.info(result);
                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var kq_lng = result[i].jd;
                        var kq_lat = result[i].wd;
                        var kq_radius = result[i].kqfw;
                        kqdd = result[i].szdd;
                        var point = new BMap.Point(kq_lng, kq_lat);
                        var circle = new BMap.Circle(point, kq_radius, { strokeColor: "#FF33FF", strokeWeight: 3, strokeOpacity: 0.2, fillColor: "#1791fc", fillOpacity: 0.05 }); //创建圆
                        //画到地图上面
                        map.addOverlay(circle);
                        kqlng = kq_lng;
                        kqlat = kq_lat;
                        kqfw = kq_radius;
                    }
                }

                updateRecordView();
            });
    }
    function iswaiqing() {
        var centerpoint = new BMap.Point(kqlng, kqlat);
        var currpoint = new BMap.Point(currlng, currlat);
        var circle = new BMap.Circle(centerpoint, kqfw, { strokeColor: "#FF33FF" }); //创建圆
        console.info(centerpoint);
        console.info(circle);
        console.info(currpoint);
        if (BMapLib.GeoUtils.isPointInCircle(currpoint, circle)) {//在范围内则不是外勤
            return false;
        } else {
            return true;
        }
    }

    //提交按钮
    function dk() {
        if (currlng == undefined || currlng == null) {
            Mobile_NS.Alert("定位尚未完成，请稍后");
            return;
        }
         var currpanci = checkbanci();
         var currjsontime1=jsontime[currpanci];
         if(currjsontime1.sbxb==1){//如果是下班打卡，则提示早退确认
         var currtime1=getCurrentDateformat('yyyy-MM-dd hh:mm');
         var bctime1=getCurrentDate()+" "+currjsontime1.time;
            if(dateTimeStrCompare(currtime1,bctime1)<0 ){
                var r=confirm("是否早退打卡!");
                    if (r==false) {
                        return;
                    }
                    
             }
         };
        var centerpoint = new BMap.Point(kqlng, kqlat);
        var currpoint = new BMap.Point(currlng, currlat);
        var circle = new BMap.Circle(centerpoint, kqfw, { strokeColor: "#FF33FF" }); //创建圆
        Mobile_NS.showLoader();
        if (BMapLib.GeoUtils.isPointInCircle(currpoint, circle)) {
            kqinsertDB(0);
        } else {
            Mobile_NS.Confirm("是否进行外勤打卡", "外勤打卡确认", 
            ["否", function () { }],
             ["是", function () {kqinsertDB(1);}]

            );
        }
        Mobile_NS.hideLoader();
    }
    //插入考勤数据
    function kqinsertDB(kqlx) {

        var now = new Date();
        var curruserid = Mobile_NS.getCurrUser();//获取当前用户
        var kqdjwd = currlng + "," + currlat;
        var currbanci = panduanbanci();
        if (currbanci == false) {
            Mobile_NS.Alert("当前时间不能打卡时间内");
            disableBtn(2);
            return;
        }
        if (kqlx == 1) {//如果是外勤，则将定位位置作为考勤点
            kqdd = curraddress;
        }
        Mobile_NS.SQL("insert into uf_kqxx (kqry,kqrq,kqsj,kqdd,kqdjwd,kqdkjd,kqdkwd,kqrdkdd,formmodeid,modedatacreater,modedatacreatertype,modedatacreatedate,modedatacreatetime,kqlx,pbsj,sbxb) values({curruserid},'{kqrq}','{kqsj}','{kqdd}','{kqdjwd}','{kqdkjd}','{kqdkwd}','{curraddress}',2,{curruserid},0,'{kqrq}','{modedatacreatetime}','{kqlx}','{paibansj}','{sbxb}');" +
            "curruserid=" + curruserid + ";kqrq=" + getCurrentDate() + ";kqsj=" + getCurrentTime()
            + ";kqdd=" + kqdd + ";kqdjwd=" + kqdjwd + ";kqdkjd=" + currlng + ";kqdkwd=" + currlat + ";curraddress=" + curraddress + ";modedatacreatetime=" + getCurrentDateformat('hh:mm:ss') + ";kqlx=" + kqlx + ";paibansj=" + currbanci.time + ";sbxb=" + currbanci.sbxb, "", function (res4) {
                if (res4 == true) {
                    Mobile_NS.Alert("您已成功打卡");
                    updateRecordView();

                } else {
                    Mobile_NS.Alert("打卡失败");
                }
            });
    }
    //班次
    var jsontime = [
        { time: "08:30", start: "05:00", end: "09:30", sbxb: 0 },
        { time: "12:00", start: "11:00", end: "13:29", sbxb: 1 },
        { time: "14:30", start: "13:30", end: "15:30", sbxb: 0 },
        { time: "17:30", start: "16:30", end: "18:30", sbxb: 1 }
    ];
    
    //更新记录显示div
    function updateRecordView() {
        var curruserid = Mobile_NS.getCurrUser();//获取当前用户
        var date = getCurrentDate();
        Mobile_NS.SQL("select concat(kqrq,' ',kqsj) as kqdt, kqsj,kqdd,pbsj,sbxb,kqlx from uf_kqxx where kqry={kqry} and kqrq='{kqrq}' order by id desc ;kqry=" + curruserid + ";kqrq=" + date, function (result) {
            //alert(JSON.stringify(result) );
            var content = "";
            var currpanci = checkbanci();
            var recordbanci;//当前班次    
            for (var index = 0; index < jsontime.length; index++) {
                var valueindex = jsontime[index];
                var pancitime = '';
                if (valueindex.sbxb == 0) {
                    pancitime = "上班时间 " + valueindex.time
                } else {
                    pancitime = "下班时间 " + valueindex.time
                }
                if (index == checkbanci()) {
                    content += '<div class="recordDiv"><ul class="disc"><li class="active">' + pancitime + '</li>';
                } else {
                    content += '<div class="recordDiv"><ul class="disc"><li>' + pancitime + '</li>';
                }

                var flag = false;
                if (result.length > 0) {

                    for (var i = 0; i < result.length; i++) {
                        var kqdatetime = result[i].kqdt;
                        var kqdd = result[i].kqdd;
                        var sbxb = result[i].sbxb;
                        var kqlx = result[i].kqlx;
                        var kqsj = result[i].kqsj;
                        var pbsj = result[i].pbsj;
                        var str2 = "";
                        var str3 = "打卡时间 " + kqsj;
                        if (pbsj == valueindex.time) {
                            var spandom=isOntime(sbxb,pbsj,kqsj);
                            if(spandom!=""){//如果不是是准时打卡
                                if (kqlx == '0') {//非外勤打卡
                                    content += '<li class="noneBold ">' + str3 + '&nbsp;' + spandom + '</li><li class="none"><span class="positionImage"></span><span>' + kqdd + '</span></li>';
                                } else {
                                        str2 = '外勤';
                                        content += '<li class="noneBold ">' + str3 + '&nbsp;<span class="greenlabel">' + str2 + '</span>&nbsp;'+spandom+'</li><li class="none"><span class="positionImage"></span><span>' + kqdd + '</span></li>';
                                }
                            }else{//准时打卡
                                if (kqlx == '0') {//非外勤打卡
                                    str2 = '正常';
                                } else {
                                        str2 = '外勤';
                                }
                                content += '<li class="noneBold ">' + str3 + '&nbsp;<span class="greenlabel">' + str2 + '</span></li><li class="none"><span class="positionImage"></span><span>' + kqdd + '</span></li>';

                            }
                            
                            
                            
                            flag = true;
                            break;
                        }
                    }
                }
                //如果当前班次没有打卡,判断但时间是否还能打卡，如果不能则显示缺卡

                if (flag == false) {
                    if (index < currpanci) {
                        content += '<li class="noneBold "><span class="juhonglabel">缺卡</span></li><li class="none"><span>&nbsp;&nbsp;</span></li>';
                    } else if (index > currpanci) {
                        content += '<li class="noneBold "></li><li class="none"><span></span></li>';
                    }
                }
                content += '</ul></div>';
                if (index == currpanci) {
                    var textshow = '打卡';
                    if (iswaiqing()) {
                        textshow = '外勤打卡';
                    }

                    if (flag == false) {//当前班次没有打卡
                        var divdom = '<div style="text-align:center;"><button class="btn" id="dk_button" onclick="dk();"> ' + textshow + '<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span></button></div>';
                        var divdom2 = '<div style="text-align:center;"><button class="btndisable disabled" id="dk_button" onclick="dk();"> ' + textshow + '<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span></button></div>';

                        if (isdkfw(index)) {
                            content += divdom;
                        } else {
                            content += divdom2;
                        }

                    } else {//当前班次已打卡
                        recordbanci = index + 1;
                    }

                }

                if (index == recordbanci) {//如果当前班次没有打卡，则将打卡按钮移动到下一个班次
                    var textshow = '打卡';
                    if (iswaiqing()) {
                        textshow = '外勤打卡';
                    }
                    var divdom = '<div style="text-align:center;"><button class="btndisable disabled" id="dk_button" onclick="dk();"> ' + textshow + '<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span></button></div>';
                    content += divdom;
                }
            };

            $("#record").html(content);
        });
    }

    //判断上下班时否准时，sbxb 上班0下班1,pbsj 排班时间，kqsj打卡时间，返回标签span
    function isOntime(sbxb,pbsj,kqsj){
        var pbsjtime=getCurrentDate()+" "+pbsj;
        var kqsjtime=getCurrentDate()+" "+kqsj;
        var html="";
        if (sbxb==0){
            if(dateTimeStrCompare(kqsjtime,pbsjtime)>0){//如果是上班时间，打卡时间>排班时间，则是迟到
                html='<span class="juhonglabel">迟到</span>'
            }
        }else{//如果是下班
            if(dateTimeStrCompare(kqsjtime,pbsjtime)<0){//如果是上班时间，打卡时间<排班时间，则是早退
                html='<span class="juhonglabel">早退</span>'
            }
        }
        return html;
    }
    //获取系统时间
    function getCurrentTime() {
        //格式化时间
        function p(s) {
            return s < 10 ? '0' + s : s;
        }
        var myDate = new Date();
        var h = myDate.getHours();
        var m = myDate.getMinutes();
        var s = myDate.getSeconds();
        return p(h) + ':' + p(m);
    }

    //获取系统时间
    function getCurrentDate() {
        //格式化时间
        function p(s) {
            return s < 10 ? '0' + s : s;
        }
        var myDate = new Date();
        var year = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        var month = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
        var day = myDate.getDate();        //获取当前日(1-31)
        return year + '-' + p(month) + '-' + p(day);
    }

    function formatDate(date, formatStr) {
        var str = formatStr;
        var Week = ['日', '一', '二', '三', '四', '五', '六'];

        str = str.replace(/yyyy|YYYY/, date.getFullYear());
        str = str.replace(/yy|YY/, (date.getYear() % 100) > 9 ? (date.getYear() % 100).toString() : '0' + (date.getYear() % 100));

        str = str.replace(/MM/, date.getMonth() > 9 ? (date.getMonth() + 1).toString() : '0' + (date.getMonth() + 1));
        str = str.replace(/M/g, date.getMonth());

        str = str.replace(/w|W/g, Week[date.getDay()]);

        str = str.replace(/dd|DD/, date.getDate() > 9 ? date.getDate().toString() : '0' + date.getDate());
        str = str.replace(/d|D/g, date.getDate());

        str = str.replace(/hh|HH/, date.getHours() > 9 ? date.getHours().toString() : '0' + date.getHours());
        str = str.replace(/h|H/g, date.getHours());
        str = str.replace(/mm/, date.getMinutes() > 9 ? date.getMinutes().toString() : '0' + date.getMinutes());
        str = str.replace(/m/g, date.getMinutes());

        str = str.replace(/ss|SS/, date.getSeconds() > 9 ? date.getSeconds().toString() : '0' + date.getSeconds());
        str = str.replace(/s|S/g, date.getSeconds());

        return str;
    }
    function getCurrentDateformat(patten) {
        var now = new Date();
        return formatDate(now, patten);
    }
    function disableBtn(type) {

        var dom = '';
        if (type == 1) {
            $('#dk_button').removeAttr("style");
            $('#dk_button').addClass("disabled");
            var css = { "color": "#ffffff", "background-color": "#949ca6", "border": "#949ca6" };
            $("#dk_button").css(css);
            dom = '已打卡<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span>';
        } else if (type == 2) {
            $('#dk_button').removeAttr("style");
            $('#dk_button').addClass("disabled");
            var css = { "color": "#ffffff", "background-color": "#949ca6", "border": "#949ca6" };
            $("#dk_button").css(css);
            dom = '打卡<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span>';
        } else if (type == 3) {
            $('#dk_button').removeAttr("style");
            var css = { "color": "#ffffff", "background-color": "#3CC472", "border": "#3CC472" };
            $("#dk_button").css(css);
            dom = '外勤打卡<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span>';
        } else {
            dom = '打卡<br /><span class="timeSpan" id="showCurrTime">' + getCurrentTime() + '</span>';
        }
        $('#dk_button').html(dom);
    }

    //判断班次和上下班
    function panduanbanci() {
        var currjsontime;
        for (var index = 0; index < jsontime.length; index++) {
            var jsonindex = jsontime[index];
            var currdatetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
            if (dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonindex.start) == 1 && dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonindex.end) == -1) {
                currjsontime = jsonindex;
                return currjsontime;
            }
        };
        if (currjsontime == undefined || currjsontime == null) {
            return false;
        }
    }
    //判断当前时间处于哪个班次
    function checkbanci() {
        var i;
        for (var index = 0; index < jsontime.length - 1; index++) {
            var thisindex = index;
            var currindex = jsontime[index];
            var nextindex = jsontime[index + 1];
            var currdatetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
            if (dateTimeStrCompare(currdatetime, getCurrentDate() + " " + currindex.end) <= 0) {
                i = thisindex;
                break;
            }

            if (dateTimeStrCompare(currdatetime, getCurrentDate() + " " + currindex.end) > 0 && dateTimeStrCompare(currdatetime, getCurrentDate() + " " + nextindex.start) <= 0) {
                i = thisindex + 1;
                break;
            }
        };
        //如果不在前n-1个班次内，则是最后一个班次
        if (i == undefined) {
            i = jsontime.length - 1;
        }
        return i;
    }
    //当前打卡按钮所在班次是否在打卡时间内
    function isdkfw(index) {
        var jsonvalue = jsontime[index];
        var currdatetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
        if (dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonvalue.start) >= 0 && dateTimeStrCompare(currdatetime, getCurrentDate() + " " + jsonvalue.end) <= 0) {
            return true;
        } else {
            return false;
        }

    }
    function dateTimeStrCompare(dtstr1, dtstr2) { //"yyyy-MM-dd hh:mm"
        dtstr1 = dtstr1.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d1 = new Date(Date.parse(dtstr1));
        dtstr2 = dtstr2.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d2 = new Date(Date.parse(dtstr2));
        var n = 0;
        if (d1 > d2) {
            n = 1;
        } else if (d1 < d2) {
            n = -1;
        } else {
            n = 0;
        }
        return n;
    }
</script>